require(['init'], function () {

  function Role(options) {
    options = options || {};
    this.data = options.data || {};
    this.$dom = $('<div class="formList"></div>');
    this.init(this.configList);
  }

  Role.prototype = {
    configList: [
      {
        title: '<span class="icon icon-size-16 icon-asterisk"></span>'+i18next.t('table.rolename')+'',//角色名
        content: {
          init: function ($content, root) {
            root.$nameInput = $('<input type="text" class="form-control" data-formcheck="length" style="width: 300px">').appendTo($content);
            root.$nameInput.on('change', function () {
              root.data.title = $.trim(root.$nameInput.val())
            })
          },
          update: function ($content, root, formData) {
            if(formData.title) {
              root.$nameInput.val(formData.title)
            }
          }
        }
      },
      {
        title: '<span class="icon icon-size-16 icon-asterisk"></span>'+i18next.t('table.introduce')+'',//介绍
        content: {
          init: function ($content, root) {
            root.$phoneInput = $('<textarea type="text" class="form-control" data-formcheck="length" style="width: 300px;height: 150px;"></textarea>').appendTo($content);
            root.$phoneInput.on('change', function () {
              root.data.intro = $.trim(root.$phoneInput.val());
            })
          },
          update: function ($content, root, formData) {
            if(formData.intro) {
              root.$phoneInput.val(formData.intro)
            }
          }
        }
      },
      {
        title:i18next.t('table.enabledstate'),//启用状态
        content: {
          init: function ($content, root) {
            root.$useCheck = $('<span class="icon icon-size-16 icon-checkbox" data-type="checkbox">\
                <input type="checkbox" name="use" data-checkedmax="1" value="1">\
            </span>').appendTo($content);
            root.data.status = 0
            root.$useCheck.on('change', function () {
              // root.data.email = $.trim(root.$emailInput.val());
              root.data.status = root.$useCheck.find('input').prop('checked') ? 1: 0
            })
          },
          update: function ($content, root, formData) {
            if(formData.status) {
              root.$useCheck.find('[type="checkbox"]').click()
            }
          }
        }
      }
    ],
    createFormLi: function (liConfig) {
      var $formLi = $('<div class="formLi"></div>').appendTo(this.$dom);
      $('<div class="formTitle"></div>').html('<span class="titleText">'+ liConfig.title +'</span>').appendTo($formLi);
      var $formContent = $('<div class="formContent"></div>').appendTo($formLi);
      liConfig.content.init($formContent, this);
      if(liConfig.content.update) {
        liConfig.content.update($formContent, this, this.data);
      }
    },

    init: function (liConfigList) {
      $.each(liConfigList, function (i, cur) {
        this.createFormLi(cur)
      }.bind(this));
    }
  }

  getRoleList()

  function getRoleList(query, cb) {
    ajaxMethod({
      url: '/api/authority/roles',
      data: query || {},
      success: function (data) {
        cb && cb(data)
        var $listTable = $('#J_rolelist').html('')
        var $thead = $('<thead>\
          <tr>\
            <th>'+i18next.t('table.no')+'</th>\
            <th>'+i18next.t('table.rolename')+'</th>\
            <th style="width:600px">'+i18next.t('table.introduce')+'</th>\
            <th>'+i18next.t('table.enabledstate')+'</th>\
            <th style="width:100px">'+i18next.t('table.handle')+'</th>\
          </tr>\
        </thead>').appendTo($listTable)

        var $tbody = $('<tbody></tbody>').appendTo($listTable)
        $.each(data, function (i, item) {
          var $item = $('<tr></tr>')
          $item.append('<td>'+ (i+1) +'</td>')
          $item.append('<td>'+ item.title +'</td>')
          $item.append('<td><div class="intro">'+ item.intro +'</div></td>')
          $item.append('<td><div class="'+ (item.status?'text-primary':'text-danger') +'">'+ (item.status?i18next.t('info.yes'):i18next.t('info.no')) +'</div></td>')

          var $handleTd = $('<td></td>').appendTo($item)
          $('<a href="permission_config.html?id='+ item.id +'" class="btn btn-primary btn-sm btn-inverse ml5">'+i18next.t('table.compile')+'</a>').appendTo($handleTd)
          var $deleteBtn = $('<span class="btn btn-danger btn-sm btn-inverse">'+i18next.t('table.delete')+'</span>').appendTo($handleTd)
          $deleteBtn.on('click', function () {
            var popUpBox = new PopUpBox({
              type: 'dom',
              style: 'default contentScroll',
              submitBtnType: 'confirm',
              titleText:i18next.t('popupbox.systemmessages'),//系统消息
              show: true,
              content: '<div style="padding:30px"> '+i18next.t('popupbox.deleterole')+'</div>',//确定删除该角色
              callback: {
                 yes: function (e) {
                   ajaxMethod({
                     url: '/api/authority/role/' + item.id,
                     method: 'delete',
                     success: function(data, status) {
                       if(status.code == 0) {
                         getRoleList()
                       }
                     }
                   })
                 }
              },
              position: {
                 width: 420,
                 height: 200
              }
            })
          })



          $item.appendTo($tbody)
        })
      }
    })
  }

  $('#js-addrole').on('click', function () {
    var role = new Role()
    var popUpBox=new PopUpBox({
      type:'dom',
      style:'default contentScroll',
      submitBtnType:'confirm',
      titleText:i18next.t('table.addadministrators'),//添加管理员
      drag:true,
      show: true,
      content: role.$dom,
      callback:{
        yes: function (e) {
          var formCheckResult = FormCheck.childrenInputCheck(role.$dom)
          if(formCheckResult) {
            ajaxMethod({
              url: '/api/authority/role',
              method: 'post',
              data: role.data,
              success: function (data, status) {
                if(status.code == 0) {
                  getRoleList()
                  popUpBox.close()
                }
              }
            })
          }
          return false;
        }
      },
      position:{
        width: 500,
        height: 400
      }
    })
  })
})
